<template>
     <header class="header">
            <slot name="left"></slot>
            <div class="msite_content"><span>{{title}}</span></div>
            <slot name="right"></slot>
        </header>
</template>

<script>
export default {
   props:['title']
}
</script>

<style lang="less">
.header{
            padding: 10px;
            display: flex;
            background-color: rgb(11, 240, 152);
            color: #fff;
            // justify-content: center;
            // align-content: center;
            .msite_search{
               
                flex: 2;
                i{
                     font-size: 20px;
                }
            }
            .msite_content{
                font-size: 20px;
                flex: 6;
                text-align: center;
                // line-height: 16px;    
                white-space:nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .msite_login{
                flex: 2;
                font-size: 14px;
                line-height: 14px;
                text-align: center;
            }
    }
</style>